<template>
	<div class="app-container flex flex-row ">
		<div class=" border-2 basis-1/5  overflow-hidden overflow-y-auto droppable mr-5 min-w-24">
			<div class="mx-auto">
				<div id="onDraggable" ref="onDraggable" class="inline-block " v-for="(item, index) in data.list"
					:key="item.id" :draggable="true" @dragstart="dragstart($event, item)">
					<div class="m-6 text-center">
						<img src="@/assets/template.png" alt="" class=" h-20 w-20">
						<span>{{ setName(item) }}</span>
					</div>
				</div>
			</div>
		</div>
		<!-- 所有模板、组件、比正常尺寸缩小三倍 -->

		<div id="toDraggable" ref="toDraggable" class="w-full flex flex-wrap  basis-3/5 mr-5 drop-content"
			v-loading="layoutRequest.loading.value" @drop.stop="drop">
			<div class=" box-content relative dpc-content"
				:style="'width:' + wrapSize.width + 'px;height:' + wrapSize.height + 'px;border:1px solid #ccc;'">
				<el-tooltip v-for="item in layoutRequest.data.value" :key="item.id" :content="item.name"
					placement="top-start">
					<div @dragover.prevent
						class="absolute border border-dashed border-[#afceed] cursor-pointer overflow-hidden flex justify-center items-center"
						:style="{
							width: item.width / ratio + 'px',
							height: item.height / ratio + 'px',
							left: item.left / ratio + 'px',
							top: item.top / ratio + 'px'
						}" @click="edit(item, 1)" :accesskey="item.id.toString()">
						<img v-if="item.plugin_list" :src="item.plugin_list.pic" :accesskey="item.id.toString()"
							style="width: 100%;height: 100%;" />
						{{ item.name }}
					</div>
				</el-tooltip>
				<div class="drop-content" @drop.stop="drop">
					<div class="dpc-content">

						<el-tooltip v-for="item in wrapSize.draggableData" :key="item.id" :content="item.name"
							placement="top-start">
							<div @dragover.prevent
								:class="item.className ? 'border border-dashed absolute text-white border-main cursor-pointer overflow-hidden flex justify-center items-center' : 'absolute  text-white border-main cursor-pointer overflow-hidden flex justify-center items-center'"
								:style="{
									fontSize: item.plugin_list && item.plugin_list.fontSizes ? item.plugin_list.fontSizes / ratio + 'px' : '',
									color: item.plugin_list && item.plugin_list.szColor ? item.plugin_list.szColor : '',
									borderRadius: item.plugin_list && item.plugin_list.circles ? item.plugin_list.circles / ratio + 'px' : '',
									border: item.plugin_list && item.plugin_list.borColor ? '1px solid' + item.plugin_list.borColor : '',
									background: item.plugin_list && item.plugin_list.bgColorName ? item.plugin_list.bgColorName : '#7dd3fc',
									width: item.width / ratio + 'px',
									height: item.height / ratio + 'px',
									left: item.left / ratio + 'px',
									top: item.top / ratio + 'px'
								}" @click="edit(item, 2)" :accesskey="item.id.toString()">
								<img v-if="item.plugin_list" :src="item.plugin_list.pic" :accesskey="item.id.toString()"
									style="width: 100%;height: 100%;" />
								<span :accesskey="item.id.toString()" class="absolute">{{ item.plugin_list &&
									item.plugin_list.name ? item.plugin_list.name : item.name }}</span>
							</div>
						</el-tooltip>
					</div>
				</div>
			</div>
		</div>
		<!--  -->
		<div :class="language == 'en'?'border-2 basis-1/5  overflow-hidden overflow-y-auto droppable pt-2 pr-5 pb-5 min-w-64':'border-2 basis-1/5  overflow-hidden overflow-y-auto droppable pt-2 pr-5 pb-5 min-w-24'">
			<el-form :model="formData" :rules="formRules" label-width="90px" ref="ruleFormRef">
				<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
					<el-tab-pane :label="$t('presets.view.set')" name="1">
						<el-form-item :label="$t('presets.view.comName')" v-if="wrapSize.isUnitName">
							<el-input v-model="formData.unitName" :placeholder="$t('message.pleaseEnter')" id="txtvalue"
								@change="changeUnitName" />
						</el-form-item>
						<el-form-item label="url" v-if="wrapSize.h5Url">
							<el-input v-model="formData.h5Url" :placeholder="$t('message.pleaseEnter')" id="txtvalue"
								@change="changeH5Url" />
						</el-form-item>
						<el-form-item :label="$t('presets.view.bgColor')" v-if="wrapSize.isbgScolor" class="relative">
							<el-input class="basis-4/6" v-model="formData.bgColors"
								:placeholder="$t('message.pleaseEnter')" id="txtvalue" @click="onColor(1)"
								@change="changebgColor(1)" />
							<div class="basis-1/5 w-8 h-8 border ml-1 flex items-center justify-center"
								@click="onColor(1)">
								<p class="w-6 h-6 border bg-[#0F0E0E] " :style="{ background: formData.bgColors }"></p>
							</div>
							<Colors v-if="Color.bgColor" @isColor="isColor" :colorFlag='Color.colorFlag'></Colors>
						</el-form-item>
						<el-form-item :label="$t('presets.view.fontColor')" class="relative flex flex-wrap" v-if="wrapSize.isszScolor">
							<el-input class="basis-4/6" v-model="formData.szColors"
								:placeholder="$t('message.pleaseEnter')" id="txtvalue" @change="changebgColor(2)" />
							<div class="basis-1/5 w-8 h-8 border ml-1 flex items-center justify-center"
								@click="onColor(2)">
								<p class="w-6 h-6 border bg-[#0F0E0E] " :style="{ background: formData.szColors }"></p>
							</div>
							<Colors v-if="Color.szColor" @isColor="isColor" :colorFlag='Color.colorFlag'></Colors>
						</el-form-item>
						<el-form-item :label="$t('presets.view.fontSize')" class="relative" v-if="wrapSize.isFontSizes">
							<el-input v-model="formData.fontSizes" :placeholder="$t('message.pleaseEnter')"
								id="txtvalue" @change="changeFontSizes">
								<template #append>
									px
								</template>
							</el-input>
						</el-form-item>
						<el-form-item :label="$t('presets.view.roundedCorners')" v-if="wrapSize.isCircle" class="relative">
							<el-input v-model="formData.circles" :placeholder="$t('message.pleaseEnter')" id="txtvalue"
								@change="changeCircle">
								<template #append>
									px
								</template>
							</el-input>
						</el-form-item>
						<!-- 下拉 -->
						<el-form-item :label="$t('presets.view.value')" class="flex flex-row" v-if="wrapSize.isSelect">
							<el-input v-model="formData.selectLabel" placeholder="label" id="txtvalue"
								class="basis-2/5" />
							<el-input v-model="formData.selectValue" placeholder="value" id="txtvalue"
								class="pl-2 basis-2/5" @change="changeSelect" />
							<span class="pl-2 basis-1/5" @click="onAdd"><el-icon-circle-plus
									class="el-icon-circle-plus w-5 h-5 text-blue-600" /></span>
						</el-form-item>
						<div id="addInput" v-for="(item, index) in contsData.conts" :Key="index">
							<div class="addInput flex flex-row" style="margin-left: 100px; margin-bottom: 15px;">
								<el-input v-model="item.selectLabel" placeholder="label" id="txtvalue"
									class="pr-2  basis-2/5 h-8 w-5"></el-input>
								<el-input v-model="item.selectValue" placeholder="value" id="txtvalue"
									class="pl-2 basis-2/5 h-8 w-5" @change="changeSelect"> </el-input>
								<span id="delItem" class="ml-2" style="cursor: pointer;"
									@click='delItem(item, index)'>—</span>
							</div>
						</div>
						<!--  -->
						<el-form-item :label="$t('presets.view.uploadPic')" v-if="wrapSize.isUpload">
							<Upload :list="{ 'data': 'wxtext', 'list': false }" :type="99" :unUpload="wrapSize.unUpload"
								:uploadUrl="data.uploadUrl" :uptype="6" @exposeData="expose" />
						</el-form-item>
						<el-form-item label="边框大小" v-if="wrapSize.isBorder" class="relative">
							<el-select class="basis-2/5 ml-1" v-model="formData.border" placeholder="选着" id="txtvalue">
								<el-option label="All" :value="0" />
								<el-option label="上" :value="1" />
								<el-option label="下" :value="2" />
								<el-option label="左" :value="3" />
								<el-option label="右" :value="4" />
							</el-select>
							<el-input class=" basis-2/5 ml-1" v-model="formData.borSize" placeholder="value"
								id="txtvalue" @change="changeBorSize" />
							<span class="ml-1">px</span>
						</el-form-item>
						<el-form-item :label="$t('presets.view.borderColor')" v-if="wrapSize.isborScolor" class="relative flex flex-wrap">
							<el-input class="basis-4/6" v-model="formData.borColors"
								:placeholder="$t('message.pleaseEnter')" id="txtvalue" @change="changebgColor(2)" />
							<div class="basis-1/5 w-8 h-8 border ml-1 flex items-center justify-center"
								@click="onColor(3)">
								<p class="w-6 h-6 border bg-[#0F0E0E]" :style="{ background: formData.borColors }"></p>
							</div>
							<Colors v-if="Color.borColor" @isColor="isColor" :colorFlag='Color.colorFlag'></Colors>
						</el-form-item>
						<div class="w-full flex justify-between">
							<div class="inline-block ml-auto">
								<el-button type="primary" @click="onSave()" v-prmis="'template_view_update'">{{
									$t('public.save')}}</el-button>
								<el-button @click="cancel">{{ $t('public.cancel') }}</el-button>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane :label="$t('presets.view.layoutSet')" name="2">
						<el-form-item :label="$t('presets.info.areaName')" prop="name">
							<el-input v-model="formData.name" :placeholder="$t('message.pleaseEnter')" disabled />
						</el-form-item>
						<el-form-item :label="$t('presets.info.layoutHeight')" prop="height">
							<el-input v-model="formData.height" :placeholder="$t('message.pleaseEnter')" disabled>
								<template #append>
									px
								</template>
							</el-input>
						</el-form-item>
						<el-form-item :label="$t('presets.info.layoutWidth')" prop="width">
							<el-input v-model="formData.width" :placeholder="$t('message.pleaseEnter')" disabled>
								<template #append>
									px
								</template>
							</el-input>
						</el-form-item>

						<el-form-item :label="$t('presets.info.leftDeviation')" prop="left">
							<el-input v-model="formData.left" :placeholder="$t('message.pleaseEnter')" disabled>
								<template #append>
									px
								</template>
							</el-input>
						</el-form-item>

						<el-form-item :label="$t('presets.info.topDeviation') + ':'" prop="top">
							<el-input v-model="formData.top" :placeholder="$t('message.pleaseEnter')" disabled>
								<template #append>
									px
								</template>
							</el-input>
						</el-form-item>

						<el-form-item :label="$t('presets.info.specifiedRange')" prop="plugin_id">
							<el-select v-model="formData.plugin_id" :placeholder="$t('message.pleaseSelect')" clearable
								multiple filterable disabled>
								<el-option v-for="item in pluginList" :key="item.value"
									:label="item.value + ' - ' + item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import { getLayoutList, getpluginsList, getUpdateView, getFindTemplateView } from '@/api/presets';
import { useRoute, useRouter } from "vue-router";
import useRequest from "@/hooks/useRequset";
import { ElMessage } from "element-plus";
import Upload from '@/components/Upload/index.vue';
import { onMounted, ref } from "vue";
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
const activeName = ref('1')
let ruleFormRef = ref<string>();
const route = useRoute()
const routers = useRouter()
const ratio = 2;
const formData = reactive({
	id: 0,
	name: '',
	height: '',
	width: '',
	left: '',
	top: '',
	plugin_id: [] as number[],
	colors: '',
	selectLabel: "",
	selectValue: '',
	unitName: "",
	circles: '',
	szColors: '',
	borColors: '',
	fontSizes: '',
	border: '',
	borSize: '',
	bgColors: '',
	h5Url: ''
})
const wrapSize = reactive({
	width: 1920,
	height: 1080,
	row: {},
	isDisabled: false,
	draggableData: [],
	isUnitName: true,
	isEditdrag: false, // 是否拖拽
	isEdit: true, // 是否编辑
	isSelect: false, // 是否显示下拉
	isBgImg: false,  // 背景图片
	isbgScolor: false,  // 背景颜色
	isszScolor: false, // 字体颜色 
	isborScolor: false, // 边框颜色
	isCircle: false, // 圆角
	isUpload: false, // 上传
	isFontSizes: false, // 字体大小
	isBorder: false, // 边框,
	isborSize: false, //边框大小
	unUpload: false,
	h5Url: false
})
const Color = reactive({
	bgColor: false,
	toColor: '',
	szColor: false,
	borColor: false,
	colorFlag: null
})
let data = reactive({
	uploadUrl: '',
	plugin_list: {}, // 编辑属性设置数据
	mtloading: false, // 加载
	list: [], // 列表信息
	langlist: [], // 语言列表
	typelist: [ // 插件类型
		$t('presets.assembly.AdTyp'),
		'LOGO',
		$t('presets.assembly.Backendbut'),
		$t('presets.assembly.buyBut'),
		$t('presets.assembly.HelpBut'),
		$t('presets.assembly.codeBut'),
		$t('presets.assembly.gameBut'),
		$t('public.picture'),
		$t('presets.assembly.switchLang'),
		$t('presets.assembly.Store'),
		$t('presets.assembly.H5Display'),
		$t('presets.assembly.Purchase')
	],
	source: { // 筛选数据
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
	currentData: {}  // 当前预览数据
})
let contsData = reactive({
	conts: []
})
let cancel = () => {
	formShow.value = false
	routers.back()
}
// 上传返回
let expose = (e) => {
	if (e.status == 200) {
		data.uploadUrl = e.file.response.data
		let obj = wrapSize.draggableData.filter(item => item.className)
		obj.forEach(item => {
			if (item.plugin_list) {
				item.plugin_list.pic = e.file.response.data
			} else {
				item.plugin_list = {
					pic: e.file.response.data
				}
			}
		})
	}
}
// 显示取色器
let onColor = (falg) => {
	Color.colorFlag = falg
	if (falg == 1) {
		Color.bgColor !== Color.bgColor
		Color.bgColor = true
	}
	if (falg == 2) {
		Color.szColor = true
	}
	if (falg == 3) {
		Color.borColor = true
	}
}
// 选中取色器后确认按钮
let isColor = (colorEnums: string, colorFlag: number) => {
	// 1是背景颜色，2是字体颜色，3是边框颜色
	wrapSize.draggableData.forEach(item => {
		if (item.className) {
			if (colorFlag == 1) {
				formData.bgColors = colorEnums
				Color.bgColor = false
				item.plugin_list.bgColorName = colorEnums
			}
			if (colorFlag == 2) {
				formData.szColors = colorEnums
				Color.szColor = false
				item.plugin_list.szColor = colorEnums
			}
			if (colorFlag == 3) {
				formData.borColors = colorEnums
				Color.borColor = false
				item.plugin_list.borColor = colorEnums
			}
		}
	})
}

//  下拉
let changeSelect = () => {
	wrapSize.draggableData.forEach(item => {
		if (item.className) {
			item.selectList = contsData.conts
		}
	})
}
let onAdd = () => {
	contsData.conts.push({ selectValue: '', selectLabel: '' })
}
let delItem = (item: Object, index: number) => {
	contsData.conts.splice(index, 1)
}
const dataInfo = reactive({
	customData: {},
	uploadName: ''
})
// 输入框
let changeUnitName = (value) => {
	changes(value, 1)
}
let changeFontSizes = (value) => {
	changes(value, 2)
}
let changeCircle = (value) => {
	changes(value, 3)
}
let changeBorSize = (value) => {
	changes(value, 4)
}
let changeH5Url = (value) => {
	changes(value, 5)
}
// 切换颜色
let changebgColor = (falg: number) => {
	if (falg == 1) {
		wrapSize.draggableData.forEach(item => {
			if (item.className) {
				item.bgColorName = formData.bgColors
			}
		})
	}
	if (falg == 2) {
		wrapSize.draggableData.forEach(item => {
			if (item.className) {
				item.szColor = formData.szColors
			}
		})
	}
}

let changes = (value: any, falg: number) => {
	let obj = wrapSize.draggableData.filter(item => item.className)
	obj.forEach(item => {
		if (falg == 1) {
			item.name = value
		}
		if (falg == 2) {
			if (item.plugin_list) {
				item.plugin_list.fontSizes = value
			} else {
				item.plugin_list = {
					fontSizes: value
				}
			}

		}
		if (falg == 3) {
			if (item.plugin_list) {
				item.plugin_list.circles = value
			} else {
				item.plugin_list = {
					circles: value
				}
			}
		}
		if (falg == 4) {
			if (item.plugin_list) {
				item.plugin_list.borSize = value
			} else {
				item.plugin_list = {
					borSize: value
				}
			}
		}
		if (falg == 5) {
			if (item.plugin_list) {
				item.plugin_list.h5Url = value
			} else {
				item.plugin_list = {
					h5Url: value
				}
			}
		}
	})
}
// 开始拖拽
const dragstart = (e: any, rowdata: any) => {
	e.dataTransfer.setData('customData', data)
	dataInfo.customData = rowdata
}
let setData = (falg: number, obj: any) => {
	let index = -1
	for (const i in wrapSize.draggableData) {
		if (wrapSize.draggableData[i].id === obj.id) {
			index = Number(i)
		}
	}
	obj.className = 'border border-dashed'
	formData.id = obj.id
	formData.name = obj.name
	formData.width = obj.width
	formData.height = obj.height
	formData.left = obj.left
	formData.top = obj.top
	formData.plugin_id = obj.plugin_id
	isShow(obj.plugin)
	if (index > -1) {
		data.uploadUrl = ''
		wrapSize.draggableData[index] = obj
	} else {
		if (falg == 1) {
			wrapSize.draggableData = [obj]
		} else {
			data.uploadUrl = ''
			formData.unitName = obj.name
			wrapSize.draggableData.push(obj)
		}
	}
}
// 鼠标松开事件
const drop = (e: any, data: any) => {
	let obj: any = null
	const key = Number(e.target.accessKey)
	if (key === 0) return;
	for (const item of layoutRequest.data.value) {
		if (item.id === key) {
			let id = dataInfo.customData.id + ''
			if (item.plugin_id.indexOf(id) !== -1) {
				item.plugin = {
					plugin_name: dataInfo.customData.plugin_name,
					display_name: dataInfo.customData.display_name,
					type: dataInfo.customData.type,
					fields: dataInfo.customData.fields
				}
				obj = item
			}
		}
	}
	if (!wrapSize.draggableData) {
		setData(1, obj)
	} else {
		formData.bgColors = ''
		formData.unitName = ''
		formData.circles = '',
			formData.szColors = '',
			formData.borColors = '',
			formData.fontSizes = '',
			formData.border = '',
			formData.borSize = ''
		formData.h5Url = ''
		wrapSize.isEdit = true
		wrapSize.draggableData.forEach(item => {
			item.className = ''
			isShow(item.plugin)
			setData(2, obj)
		})
	}
}

// 修改布局
const edit = (item: Preset.Layout, type) => {
	// 1是页面布局 2 是修改添加属性设置后布局
	if (type == 1) {
		formData.unitName = item.name
		data.uploadUrl = ''
		formData.bgColors = ''
		formData.circles = ''
		formData.szColors = ''
		formData.borColors = ''
		formData.fontSizes = ''
		formData.border = ''
		formData.borSize = ''
		formData.h5Url = ''
		wrapSize.isUpload = false
		wrapSize.isCircle = false
		wrapSize.isborScolor = false
		wrapSize.isszScolor = false
		wrapSize.isbgScolor = false
		wrapSize.isFontSizes = false
		wrapSize.isszScolor = false
		wrapSize.isbgScolor = false
		wrapSize.isEdit = false
		wrapSize.isEditdrag = false
		wrapSize.h5Url = false
		formData.id = item.id
		formData.name = item.name
		formData.width = item.width.toString()
		formData.height = item.height.toString()
		formData.left = item.left.toString()
		formData.top = item.top.toString()
		if (item.plugin_id) {
			formData.plugin_id = item.plugin_id.split(',').map(item => Number(item))
		} else {
			formData.plugin_id = []
		}
		wrapSize.draggableData.forEach(item => {
			item.className = ''
		})
		formShow.value = true
	}
	if (type == 2) {
		if (item.plugin_list) {
			formData.bgColors = item.plugin_list.bgColorName
			formData.circles = item.plugin_list.circles,
				formData.szColors = item.plugin_list.szColor,
				formData.borColors = item.plugin_list.borColors,
				formData.fontSizes = item.plugin_list.fontSizes,
				formData.border = item.plugin_list.border,
				formData.borSize = item.plugin_list.borSize
			formData.h5Url = item.plugin_list.h5Url
			data.uploadUrl = item.plugin_list.pic
		} else {
			data.uploadUrl = ''
		}
		formData.unitName = item.name
		wrapSize.isEdit = true
		wrapSize.draggableData.forEach(item => {
			item.className = ''
		})
		item.className = 'border border-dashed'
		isShow(item.plugin)
	}
}

//  是否显示各个属性设置
let isShow = (item) => {
	if (typeof !'string') {
		item.type = item.type.toString()
	}
	// 广告插件
	if (item.type == '1') {
		wrapSize.isEditdrag = false
		wrapSize.isbgScolor = false
		wrapSize.isUpload = false
		wrapSize.isFontSizes = true
		wrapSize.isCircle = true
		wrapSize.isszScolor = true
		wrapSize.h5Url = false
	}
	// logo
	if (item.type == '2') {
		wrapSize.isUpload = true
		wrapSize.isCircle = true
		wrapSize.isborScolor = false
		wrapSize.isszScolor = false
		wrapSize.isbgScolor = false
		wrapSize.isFontSizes = true
		wrapSize.isszScolor = true
		wrapSize.isbgScolor = true
		wrapSize.h5Url = false
	}
	// 后台按钮
	if (item.type == '3') {
		wrapSize.isUpload = true
		wrapSize.isCircle = true
		wrapSize.isborScolor = false
		wrapSize.isszScolor = false
		wrapSize.isbgScolor = false
		wrapSize.isFontSizes = true
		wrapSize.isszScolor = true
		wrapSize.isbgScolor = true
		wrapSize.h5Url = false
	}
	// 购买按钮
	if (item.type == '4') {
		wrapSize.isEditdrag = true
		wrapSize.isbgScolor = true
		wrapSize.isszScolor = true
		wrapSize.isborScolor = false
		wrapSize.isCircle = true
		wrapSize.isUpload = true
		wrapSize.isFontSizes = true
		wrapSize.isBorder = false
		wrapSize.h5Url = false
		wrapSize.isUnitName = true
	}
	// 帮助按钮
	if (item.type == '5') {
		wrapSize.isUpload = true
		wrapSize.isCircle = true
		wrapSize.isborScolor = false
		wrapSize.isszScolor = false
		wrapSize.isbgScolor = false
		wrapSize.isFontSizes = true
		wrapSize.isszScolor = true
		wrapSize.isbgScolor = true
		wrapSize.h5Url = false
	}
	// 取货码按钮
	if (item.type == '6') {
		wrapSize.isUpload = true
		wrapSize.isCircle = true
		wrapSize.isborScolor = false
		wrapSize.isszScolor = false
		wrapSize.isbgScolor = false
		wrapSize.isFontSizes = true
		wrapSize.isszScolor = true
		wrapSize.isbgScolor = true
		wrapSize.h5Url = false
	}
	// 游戏按钮
	if (item.type == '7') {
		wrapSize.isUpload = true
		wrapSize.isCircle = true
		wrapSize.isborScolor = false
		wrapSize.isszScolor = false
		wrapSize.isbgScolor = false
		wrapSize.isFontSizes = true
		wrapSize.isszScolor = true
		wrapSize.isbgScolor = true
		wrapSize.h5Url = false
	}
	// 背景图片
	if (item.type == '8') {
		wrapSize.isUpload = true
		wrapSize.isEditdrag = true
		wrapSize.isborScolor = false
		wrapSize.isCircle = true
		wrapSize.isBgImg = true
		wrapSize.isbgScolor = false
		wrapSize.isszScolor = false
		wrapSize.isFontSizes = false
		wrapSize.h5Url = false
	}
	// 语言切换
	if (item.type == '9') {
		wrapSize.isUpload = true
		wrapSize.isEditdrag = true
		wrapSize.isborScolor = false
		wrapSize.isCircle = true
		wrapSize.isBgImg = true
		wrapSize.isbgScolor = false
		wrapSize.isszScolor = false
		wrapSize.isFontSizes = false
		wrapSize.h5Url = false
	}
	// 门店活动
	if (item.type == '10') {
		wrapSize.isUpload = true
		wrapSize.isEditdrag = true
		wrapSize.isborScolor = false
		wrapSize.isCircle = true
		wrapSize.isBgImg = true
		wrapSize.isbgScolor = false
		wrapSize.isszScolor = false
		wrapSize.isFontSizes = false
		wrapSize.h5Url = false
	}
	// H5展示
	if (item.type == '11') {
		wrapSize.isUpload = true
		wrapSize.isEditdrag = false
		wrapSize.isborScolor = false
		wrapSize.isCircle = false
		wrapSize.isBgImg = false
		wrapSize.isbgScolor = false
		wrapSize.isszScolor = false
		wrapSize.isFontSizes = false
		wrapSize.h5Url = true
		wrapSize.isUnitName = false
	}
	// 购买按钮
	if (item.type == '12') {
		wrapSize.isEditdrag = true
		wrapSize.isbgScolor = true
		wrapSize.isszScolor = true
		wrapSize.isborScolor = false
		wrapSize.isCircle = true
		wrapSize.isUpload = true
		wrapSize.isFontSizes = true
		wrapSize.isBorder = false
		wrapSize.h5Url = false
		wrapSize.isUnitName = true
	}
}

// 组件模版
const layoutRequest = useRequest(() => {
	return getLayoutList({ template_id: data.currentData.template_id }) // data.currentData.template_id
}
)
onMounted(() => {
	let rowParams = {}
	getFindTemplateView({ id: route?.query.id }).then(res => {
		rowParams = res.data
		let editData = JSON.parse(rowParams.plugin_data)
		data.currentData = rowParams
		wrapSize.width = rowParams.width / ratio
		wrapSize.height = rowParams.height / ratio
		wrapSize.draggableData = editData
		layoutRequest.getData(rowParams)
	})

})

let setName = (item: object) => {
	let displayName = JSON.parse(item.display_name)
	for (let i of Object.values(displayName)) {
		return i
	}
}

// 获取左边列表信息
let getlist = () => {
	data.mtloading = true
	getpluginsList(data.source).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
		}
	})
}
getlist()

// 表单数据
const formShow = ref(false);
const formRules = {
	name: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
	height: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
	width: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
	left: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
	top: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
	plugin_id: { required: true, message:  $t('message.pleaseSelect'), trigger: 'change' },
}
// 保存数据提交
let onSave = async () => {
	if (!wrapSize.draggableData.length) {
		ElMessage({
			message: $t('message.pleaseSelectTemp'),
			type: 'error'
		})
		return
	}
	let plugin_data = []
	wrapSize.draggableData.forEach(item => {
		item.plugin.fields = item.plugin_list
		let objData = {
			layout_id: item.template_id,
			height: item.height,
			width: item.width,
			left: item.left,
			top: item.top,
			plugin_id: item.plugin_id,
			plugin: item.plugin
		}
		plugin_data.push(objData)
	})
	const pram = {
		id: data.currentData.id,
		name: data.currentData.name,
		template_id: data.currentData.template_id,
		height: data.currentData.height,
		width: data.currentData.width,
		plugin_data: JSON.stringify(wrapSize.draggableData)
	}
	let res = await getUpdateView(pram)
	if (res.state == 200) {
		ElMessage({
			message: $t('message.modifySuccess'),
			type: 'success'
		})
		formShow.value = false
		routers.back()
		layoutRequest.getData({})
		return
	}
	ElMessage({
		message: $t('message.modifyFailed'),
		type: 'error'
	})
}
</script>
<style scoped lang="scss">
.el-form-item__label{
	line-height: 16px !important;
}
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	border: 1px solid #eee;
	color: #8c939d;
	width: 78px;
	height: 78px;
	line-height: 178px;
	text-align: center;

}

.avatar {
	width: 78px;

	height: 78px;
	display: block;
}



.dc-el {
	margin-top: 20px;
	width: 100px;
	height: 100px;
	background: #ccc;
}

.dc-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

}

.dc-title {
	text-align: center;
}

.drag-content {
	width: 250px;
	height: 100%;
	background: #ddd;
	padding: 10px 15px;
}

.dpc-title {
	text-align: center;
}

.drag-page {
	height: 100vh;
	display: flex;
	align-items: center;
}

.dpc-el {
	margin-top: 20px;
	margin-left: 20px;
	width: 100px;
	height: 100px;
	background: #ccc;
}

.dpc-content {
	display: flex;
	flex-wrap: wrap;
}

.drop-content {
	flex: 1;
	height: 100%;
	background: #fff;
}
</style>
